<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue.js的模板语法</title>
  </head>
  <body>
    <div id="app">
     <p>{{ message.toUpperCase() }}</p>
     <p><a :[attribute]="url">新浪网</a></p>
     <span v-html="spanHtml"></span>
     <p>
      <button @click="sayHello">问候</button>
    </p>
    </div>
    <script src="../../vue.js"></script>
    <script>
      const app = Vue.createApp({
        data(){
          return {
            message: 'Hello Vue.js',
            url: 'http://www.sina.com.cn',
            spanHtml: '<span style="color: red">HTML元素，以红色字体显示</span>',
            attribute: 'href'

          }
        },
        methods: {
          sayHello(){
            alert("你好！")
          }
        }
      })
      const vm = app.mount('#app')
    </script>
  </body>
</html>
